﻿@model IEnumerable<NapCardOnline.Models.ServiceCost>
           <span id="ajax-loading" class="hide">
                <img width="24" src="../../Images/ajax_loading.gif" /></span>
@foreach (var model in Model)
{
    <li class="span2" style="width: 180px; height: 100px"><a id="@(model.ServiceCostID)" href="#" class="thumbnail">
        <ol style="width: 180px; height: 100px">
            @(model.Service.ServiceName)
            @(model.Cost.CostName)
        </ol>
        @*<img data-src="holder.js/300x200" alt="" style="width: 180px; height: 100px" src="@Url.Content(model.ServiceCostUrl)">*@
    </a>@*@(model.Service.ServiceName) @(model.Cost.CostName)*@</li>
}
<script type="text/javascript">
    $(function () {
        $("ul#service-cost-ul li a").click(function (e) {
            $("#ajax-loading").removeClass().addClass("show");
            e.preventDefault();
            var serviceCostId = this.id;
            $.ajax({
                url: '@Url.Action("_Payment", "Payment")',
                data: { serviceCostId: serviceCostId },
                success: function (data) {
                    $("#service-cost-span5 .thumbnails").empty();
                    $("#service-cost-span5 .thumbnails").append(data);    
//                    $("#service-cost-span5 .thumbnails").fadeOut(function() {
//                        $("#service-cost-span5 .thumbnails").empty();
//                    });
//                    $("#service-cost-span5 .thumbnails").slideToggle("slow", function () {
//                        $("#service-cost-span5 .thumbnails").append(data);    
                    //                    });
                    $("#ajax-loading").removeClass().addClass("hide");
                },
                error: function () {

                }
            });
        });
    });
    
</script>
